<template>
	<view class="home_tab">
		<view class="home_tab_title">
			<view class="title_inner">
				<uni-segmented-control
				:current="current" 
				:values="items.map(v => v.title)" @clickItem="onClickItem"
				styleType="text" activeColor="#d3237b"
				></uni-segmented-control>
			</view>
			<view class="iconfont icon-search1">	
			</view> 
		</view>
		 <view class="home_tab_content">
				<view v-if="current === 0">
						<recommend ></recommend>
				</view>
				<view v-if="current === 1">
						<category></category>
				</view>
				<view v-if="current === 2">
						<news></news>
				</view>
				<view v-if="current === 3">
					<album></album>
				</view>
		</view>
	
	</view>

</template>

<script>
	import recommend from './comps/recommend.vue'
	import news from './comps/new.vue'
	import album from './comps/album.vue'
	import category from './comps/category.vue'
	export default {
		data() { 
			return { 
				items: [
					{title: '推荐'},
					{title: '分类'},
					{title: '最新'},
					{title: '专辑'},
				],
				current:0
			} 
		}, 
		components: {
			recommend,
			news,
			album,
			category
		},
		 onLoad() { 
			// this.getImage()
		},
		methods: {
			onClickItem(index) { 
				if (this.current !== index.currentIndex) { 
				this.current = index.currentIndex;
				}
			},
			async	getImage() {
			const res =	await	this.request({
					url: 'http://157.122.54.189:9088/image/v1/vertical/category'
				})
				console.log(res)
			}
		}
	}
</script>

<style lang="less">
	.home_tab {
		.home_tab_title {
			position: relative;
			.title_inner {
				width: 60%;
				margin: 0 auto;
			}
			.icon-search1{
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 5%;
			}
		}
		.home_tab_content {
			
		}
	}
</style>
